import React, { useState } from 'react';
import { Button, Modal,Form  } from 'antd';
import CForm from '@/components/commonForm';
export type cDialogProp = {
    form:any,
    title:string,
    options:any[],
    visible:boolean,
    width:number,
    onOk:(form:any) => void,
    onCancel:() => void
};
type SizeType = Parameters<typeof Form>[0]['size'];
const cDialog:React.FC<cDialogProp> = (props) => {
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const [form] = Form.useForm();
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };
    const formChange = (info:any) => {
        console.log(info);
    };

    const handleOk = async (form:any) => {
        const values = await form.validateFields();
        console.log(values,'handle ok form');
        props.onOk(values);

    };
    return (
        <>
            <Modal
                title={props.title}
                open={props.visible}
                onOk={()=>{
                    handleOk(form)
                }
                    
                }
                onCancel={()=>{
                    props.onCancel();
                }}
                okText="确定"
                cancelText="取消"
                width={props.width}
                
            >
                <div style={{marginTop:20}}>
                    <CForm 
                        form={form}
                        options={props.options}
                        onChange={(info:any)=>{formChange(info)}}
                    />
                </div>
                

            </Modal>
        </>
        
    );
}
export default cDialog;